<template>

  <div class="user-infocon">
    <div class="bg">
      <div style="cursor: pointer" @click="uploadDialog = true">
        <el-image :src="userData.avatar" class="user-img">
          <div slot="error">
            <img src="@/assets/web/avatar.png">
          </div>
        </el-image>

      </div>
      <div class="infor" style="line-height: 20px; margin-top: 0px">
        <p class="name">{{ userData.realName }} （ID：{{ userData.id }}）</p>
        <p class="class"><span><i class="el-icon-s-custom" /> 部门：{{ userData.deptCode_dictText }}</span> </p>
      </div>
    </div>

    <el-dialog title="上传头像" :visible="uploadDialog" width="500px" @close="uploadDialog=false">
      <file-upload v-model="postForm.avatar" list-type="picture" />
    </el-dialog>

  </div>

</template>

<script>

import { mapGetters } from 'vuex'
import { findInfo, updateData } from '@/api/sys/user/user'
import FileUpload from '@/components/FileUpload'

export default {
  name: 'UserBanner',
  components: { FileUpload },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  data() {
    return {
      uploadDialog: false,
      userData: {},
      postForm: {
        avatar: null
      }
    }
  },

  watch: {
    'postForm.avatar': {
      handler(val) {
        if (val != null && val != '') {
          this.handleUpdate()
          this.uploadDialog = false
        }
      }
    }
  },

  created() {
    this.handleUserInfo()
  },
  methods: {

    handleUpdate() {
      updateData(this.postForm).then(res => {
        window.location.reload()
      })
    },

    handleUserInfo() {
      findInfo(this.token).then(res => {
        this.userData = res.data
      })
    }
  }
}
</script>

<style>
  .user-infocon {
    height: 145px;
    background: url(../../../../../assets/web/images/personalbg.png) no-repeat top center;
    background-size: 100% 100%;
  }

  .user-infocon {
    padding: 0 85px
  }

  .user-infocon .bg {
    display: flex;
    padding-top: 40px;
  }

  .user-infocon .user-img {
    border: 1px solid #f5f5f5;
    width: 130px;
    height: 130px;
    overflow: hidden;
    position: relative
  }

  .user-infocon .user-img img {
    width: 130px;
    height: 130px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }

  .user-infocon .infor {
    margin: 10px 0 0 35px;
  }

  .user-infocon .infor .name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-top: 0px;
  }

  .user-infocon .infor .class {
    font-size: 14px;
    color: #fff;
  }

  .user-infocon .infor .class span:first-child:after {
    content: "|";
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: -15px;
    top: 0
  }
</style>
